<template>
  <view :class="['home', themeClass]">
    <view class="search">
      <view class="set" @click="returnToTheSuperior">
        <image :src="back" />
      </view>
      <view class="title">
        <text>Pixiv</text>
      </view>
      <view class="icon"></view>
    </view>
    <view class="body">
      <ImgList @scrolltolower="scrolltolowerEvent" @refreshEvent="refreshEvent" :imgList="imgList" class="imgList">
      </ImgList>
      <Loading v-show='loading' class="loadMore"></Loading>
    </view>
  </view>
</template>
<script setup lang="ts">
import { useTheme } from '@/hooks/useTheme'
const { themeClass } = useTheme()
import { onLoad } from '@dcloudio/uni-app'
import back from '@/static/images/back.png'
import { getSetu } from '@/services/home'
import { ref } from 'vue'
import { useImgInfoStore } from '@/stores/index'
const imgInfoStore = useImgInfoStore()
type ImgList = {
  small: string
  src: string
  tag: string
}
// 判断是否存在
const imgSet = new Set()
const imgList = ref<ImgList[]>([])
const limit = ref(30)
const words = ref('')
const loading = ref(false)
const getData = async () => {
  loading.value = true
  try {
    const res = await getSetu({
      num: limit.value,
      r18: imgInfoStore.pixivType,
      replace_url: "https://i.pixiv.re",
      tags: [words.value],
      random: Math.random()
    })
    loading.value = false
    if (res.data.length == 0) return
    for (let i = 0; i < res.data.length; i++) {
      // 判断是否已经存在
      if (imgSet.has(res.data[i].urls.medium)) continue
      // 根据 src 判断是否已经存在
      if (imgList.value.some((item) => item.src === res.data[i].urls.original)) continue
      imgList.value.push({
        small: res.data[i].urls.medium,
        src: res.data[i].urls.original,
        tag: res.data[i].tags.join(' ')
      })
      imgSet.add(res.data[i].urls.medium)
    }
  } catch (error) {
    loading.value = false
  }
}
const scrolltolowerEvent = () => {
  if (loading.value) return
  getData()
}
const refreshEvent = () => {
  imgList.value = []
  imgSet.clear()
  getData()
}
const returnToTheSuperior = () => {
  uni.navigateBack()
}
onLoad(() => {
  getData()
})
</script>
<style scoped lang="scss">
.home {
  padding-top: var(--status-bar-height);
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  .search {
    padding: 10rpx;
    display: grid;
    gap: 5px;
    grid-template-columns: 60rpx 1fr 60rpx;

    .set,
    .icon {
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        height: 60rpx;
        width: 60rpx;
      }
    }

    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 20rpx;
      font-weight: bold;
    }
  }

  .body {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .imgList {
      flex: 1;
    }

    .loadMore {
      left: 50%;
      transform: translateX(-50%);
      bottom: 20rpx;
      position: absolute;
    }
  }
}
</style>
